<!DOCTYPE html>
<html>
<head>
    <title>employee.html</title>
    <meta charset="UTF-8"/>
    <!--  VUE -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- elementUI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

<div id="app">
    <!-- 工具条  -->

    <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="员工编号" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="telephone" label="手机号" width="180"></el-table-column>
        <el-table-column prop="hiredate" label="入职时间" width="180"></el-table-column>
        <el-table-column prop="dname" label="部门"></el-table-column>
        <el-table-column prop="rname" label="角色"></el-table-column>
        <el-table-column prop="state" label="状态" :formatter="stateFormatter"></el-table-column>


        <el-table-column label="详情">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑
                </el-button>
            </template>
        </el-table-column>

    </el-table>
    <!-- 分页条  -->


    <!-- 弹框 -->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-form status-icon :model="empInfo" ref="loginFrom" label-width="100px" class="demo-ruleForm">
            <el-input type="hidden" v-model="empInfo.id" autocomplete="off"></el-input>
            <el-form-item label="姓名" prop="name">
                <el-input type="text" v-model="empInfo.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="telephone">
                <el-input type="text" v-model="empInfo.telephone" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>


<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            tableData: [],
        },
    });


    function reload() {
        axios.post('/emp/Emp', app.empQuery)
            .then(function (response) {
                app.tableData = response.data.empData;
                app.empTotal = response.data.empTotal;
            });
    }

    reload();
    axios.post('/emp/getDeptangRole')
        .then(function (response) {
            app.deptArr = response.data.dept;
            app.roleArr = response.data.Role;
        });
</script>
</body>
</html>
